<template>
  <div class="content-container">
    <el-row
      type="flex"
      justify="space-between"
      class="header-filter four-border-blueBg"
    >
      <span>
        <DateTimeRange v-model="formData.timePeriod" class="item" />
        <el-button type="primary" @click="handleQuery">{{
          $t('public.search')
        }}</el-button>
        <el-button @click="handleReset">{{ $t('public.reset') }}</el-button>
      </span>
      <el-button @click="handleMarkAllAsRead">
        <span class="all-read-button">
          <svg-icon icon-class="read" />
          {{ $t('msgQueue.markAllAsRead') }}
        </span>
      </el-button>
    </el-row>
    <div class="base-table-container">
      <BaseTable ref="refContentTable" v-loading="loading" :data="tableData">
        <tableColumn
          align="center"
          type="index"
          :label="$t('msgQueue.no')"
          width="76"
        />
        <tableColumn
          header-align="left"
          align="left"
          prop="title"
          :label="$t('msgQueue.announcementTitle')"
          :column-width="columnWidthObj.title"
        />
        <tableColumn
          header-align="left"
          align="left"
          prop="content"
          :label="$t('msgQueue.messageContent')"
          :show-overflow-tooltip="columnWidthObj.content > 0"
          :column-width="Math.min(columnWidthObj.content, 320)"
        />
        <tableColumn
          align="left"
          prop="createTime"
          :label="$t('public.createTime')"
          :column-width="columnWidthObj.createTime"
        />
        <tableColumn
          header-align="left"
          maxWidth="240"
          prop="action"
          fixed="right"
          :label="$t('public.action')"
          :column-width="columnWidthObj.action"
        >
          <template #default="{ row }">
            <div class="table-column-btn-wrap">
              <el-button
                text
                :disabled="row.status === 2"
                @click="handleMarkRead(row)"
              >
                <svg-icon icon-class="read" />
                {{ $t('msgQueue.markAsRead') }}</el-button
              >|
              <el-button
                text
                :icon="Link"
                :size="24"
                @click="handleLink(row)"
                >{{ $t('msgQueue.link') }}</el-button
              >
            </div>
          </template>
        </tableColumn>
      </BaseTable>
      <el-row class="pagination-row">
        <BasePagination
          v-model:page-size="pageSize"
          v-model:current-page="pageNum"
          :total="total"
          @change="getDataList()"
        />
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { Link } from '@element-plus/icons-vue'

const formData = ref({
  timePeriod: []
})
const refContentTable = ref(null)
const loading = ref(false)
const tableData = ref([
  // {
  //   id: 2515003,
  //   title: '批量任务-导出报表',
  //   content:
  //     '设备列表数据导出成功，文件名为Default-DeviceManage-DeviceInfoList-20250414173315.xlsx',
  //   status: 0,
  //   urlParam: '{"taskId":"961385fdaffc42c1ab5820dccac957aa"}',
  //   type: 'batchTask',
  //   createTime: '2025-04-14 17:33:15',
  //   tenant: 'Default'
  // }
])
const columnWidthObj = ref({})
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const appStore = useAppStore()
const { msgTotal } = storeToRefs(appStore)

onMounted(() => {
  getDataList()
})

const getDataList = (load = true) => {
  loading.value = load
  tableData.value = []
  g_api.sysMsg
    .apiQueryList({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      startTime: formData.value.timePeriod[0],
      endTime: formData.value.timePeriod[1]
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        total.value = data.total
        tableData.value = data.items
        appStore.setMsgTotal(data.total || 0)
        useTableColumnWidth({
          refTable: refContentTable.value
        }).getTableColumnWidth(data => {
          columnWidthObj.value = data
        })
      }
    })
    .finally(_ => {
      loading.value = false
    })
}

const handleQuery = () => {
  pageNum.value = 1
  getDataList()
}

const handleReset = () => {
  Object.assign(formData.value, {
    timePeriod: []
  })
  handleQuery()
}

const handleMarkAllAsRead = () => {
  ElMessageBox.confirm(
    g_t(`msgQueue.confirmMarkAllAsRead`),
    g_t('public.tip'),
    {
      confirmButtonText: g_t('public.confirm'),
      cancelButtonText: g_t('public.cancel'),
      type: 'warning'
    }
  )
    .then(() => {
      g_api.sysMsg
        .apiUpdateStatus({
          idList: tableData.value.map(item => item.id),
          status: 2
        })
        .then(res => {
          if (res.code === '200') {
            handleQuery()
          }
        })
    })
    .catch(() => {})
}

const handleMarkRead = row => {
  ElMessageBox.confirm(
    g_t(`msgQueue.confirmRead`, {
      name: row.title
    }),
    g_t('public.tip'),
    {
      confirmButtonText: g_t('public.confirm'),
      cancelButtonText: g_t('public.cancel'),
      type: 'warning'
    }
  )
    .then(() => {
      g_api.sysMsg
        .apiUpdateStatus({
          idList: [row.id],
          status: 2
        })
        .then(res => {
          if (res.code === '200') {
            appStore.setMsgTotal(msgTotal.value - 1)
            getDataList(false)
          }
        })
    })
    .catch(() => {})
}

const handleLink = row => {
  try {
    g_router.push({
      path: g_options.getOptionText(g_options.msgTypeOptions, row.type)
    })
  } catch (error) {
    console.error('导航到路由时出错:', error)
  }
}
</script>

<style lang="scss" scoped>
.all-read-button {
  display: flex;
  align-items: center;
}
.svg-icon {
  width: 14px !important;
  height: 14px !important;
  margin-right: 6px;
}
</style>
